<section class="tlp-framed-vertically">
    <h1 class="tlp-framed-horizontally">{{ title }}</h1>
    <nav class="tlp-tabs">
        <a href="/admin/system_events/" class="tlp-tab">{{ events_label }}</a>
        <a href="/admin/system_events/notifications.php" class="tlp-tab tlp-tab-active">{{ notifications_label }}</a>
    </nav>

    <div class="tlp-framed-horizontally">
        <section class="tlp-pane">
            <div class="tlp-pane-container">
                <div class="tlp-pane-header">
                    <h1 class="tlp-pane-title">
                        <i class="fa fa-envelope-o tlp-pane-title-icon"></i> {{ notifications_label }}
                    </h1>
                </div>
                <section class="tlp-pane-section">
                    <div class="tlp-table-actions">
                        <button type="button"
                                class="tlp-button-primary tlp-table-actions-element"
                                data-modal-id="add-notification-modal"
                        >
                            <i class="tlp-button-icon fa fa-plus"></i> {{ add_notification_label }}
                        </button>
                        {{> notifications-add-modal }}
                    </div>
                    <table class="tlp-table">
                        <thead>
                            <tr>
                                <th>{{ emails_label }}</th>
                                <th>{{ listen_label }}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {{# notifications }}
                                <tr>
                                    <td>
                                        {{ emails }}
                                    </td>
                                    <td>
                                        {{# status }}{{# checked }}{{^ is_first_checked }}, {{/ is_first_checked }}{{ label }}{{/ checked }}{{/ status }}
                                    </td>
                                    <td class="tlp-table-cell-actions">
                                        <button type="button"
                                            class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline"
                                            data-modal-id="edit-notification-modal-{{ id }}"
                                        >
                                            <i class="fa fa-pencil tlp-button-icon"></i> {{ edit_label }}
                                        </button>
                                        <button type="button"
                                            class="tlp-table-cell-actions-button tlp-button-small tlp-button-danger tlp-button-outline"
                                            data-modal-id="delete-notification-modal-{{ id }}"
                                        >
                                            <i class="fa fa-trash-o tlp-button-icon"></i> {{ delete_label }}
                                        </button>
                                        {{> notifications-edit-modal }}
                                        {{> notifications-delete-modal }}
                                    </td>
                                </tr>
                            {{/ notifications }}
                            {{^ notifications }}
                                <tr>
                                    <td colspan="3" class="tlp-table-cell-empty">
                                        {{ empty_state }}
                                    </td>
                                </tr>
                            {{/ notifications }}
                        </tbody>
                    </table>
                </section>
            </div>
        </section>
    </div>
</section>
